<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--react核⼼包-->
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <!--react dom相关的包-->
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <!-- 提供es6和jsx的⽀持-->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <style>
        ul {
            overflow: hidden;
        }

        li {
            float: left;
            list-style: none;
            width: 120px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: blanchedalmond;
        }

        .act {
            background-color: red;
        }
    </style>
</head>
<body>
<div id="app"></div>

<script type="text/babel">
    // 创建页面根节点
    const container = document.getElementById("app")
    const root = ReactDOM.createRoot(container)

    class Navi extends React.Component {
        state = {
            index: this.props.defaultAct
        }

        change = (index) => {
            this.setState({
                index: index
            })
        }

        render() {
            let {index} = this.state
            return (
                <ul>
                    <li className={index===1?"act":""} onClick={()=>{this.change(1)}}>Home</li>
                    <li className={index===2?"act":""} onClick={()=>{this.change(2)}}>About</li>
                    <li className={index===3?"act":""} onClick={()=>{this.change(3)}}>Contact</li>
                    <li className={index===4?"act":""} onClick={()=>{this.change(4)}}>Blog</li>
                </ul>
            )
        }
    }

    root.render(<>
            <Navi defaultAct={1}>
            </Navi>
            <Navi defaultAct={2}>
            </Navi>
            <Navi defaultAct={3}>
            </Navi>
            <Navi defaultAct={4}>
            </Navi>
        </>
    )
</script>
</body>
</html>